<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<script src="https://unpkg.com/vue-router@4"></script>
	</head>
	<body>
		
		<div id="app">
			<h2>网站导航</h2>
			<a href="#/">首页</a>&nbsp;&nbsp;
			<a href="#/about">关于页</a>&nbsp;&nbsp;
			<a href="#login">登录页</a>&nbsp;
			
			
			<h2>网站导航-方式2</h2>
			<router-link to="/">首页</router-link>&nbsp;&nbsp;
			<router-link to="/about">关于页</router-link>&nbsp;&nbsp;
			<router-link to="/login">登录页</router-link>&nbsp;
			<router-link to="/detail/1">商品1</router-link>
			<router-link to="/detail/2">商品2</router-link>
			<router-link to="/detail/2">商品2</router-link>
			<router-view></router-view>
		</div>
		
		<script type="module">			
			import home from'./home.js'
			import about from'./about.js'
			import login from'./login.js'
			import productdetail from './productdetail.js'
			import productdetail2 from './productdetail2.js'
			import productlist from './productdeliist.js'
			
			const routes=[
				{path:"/",component:home},
				{path:"/about",component:about},
				{path:"/login",component:login},
				{path:"/detail/:id",component:productdetail},
				{path:"/detail2",component:productdetail2},
				{path:"/list",component:productlist},
			]
			
			const router = VueRouter.createRouter({
			history: VueRouter.createWebHashHistory(),
			routes,
			})
			var app = Vue.createApp({
				data(){
					return {"message":"Hello World!"}
				}
			});
			app.use(router)
			
			var vm = app.mount("#app")
		</script>
	</body>
</html>
